<template>
  <a-drawer
    :title="title"
    :width="720"
    :visible="visible"
    @close="close">
    <a-spin :spinning="loading">
      <a-steps v-if="form.nodeLevel==2" :current="step" size="small" style="width: 70%;margin: 0 auto 20px">
        <a-step title="基本配置"/>
        <a-step title="分配部门/人员"/>
        <a-step title="分配权限"/>
      </a-steps>
      <a-form-model v-bind="layout" v-show="step===0" :model="form" ref="nodeForm" :rules="rules">
        <a-form-model-item label="节点层级">
          <a-radio-group v-model='form.nodeLevel' :disabled="'query'===type">
            <a-radio value="1">一级节点</a-radio>
            <a-radio value="2">二级节点</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="节点名称" prop="nodeName">
          <a-input v-model='form.nodeName' placeholder="请输入节点名称" :readOnly="'query'===type"></a-input>
        </a-form-model-item>
        <a-form-model-item v-if="form.nodeLevel == 2" label="上级节点" prop="parentNodeId">
          <a-select v-model="form.parentNodeId" :options="parentNodeData" :disabled="'query'===type">
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="下级节点协作关系">
          <a-radio-group v-model="form.opType" :disabled="form.nodeLevel == 2||'query'===type">
            <a-radio value="0">或关联</a-radio>
            <a-radio value="1">且关联</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="回退节点">
          <a-select v-model="form.backNodeId" allowClear :options="parentNodeData"
                    :disabled="form.nodeLevel == 2||'query'===type">
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-has="'flow:perform'" v-if="form.nodeLevel == 2" label="绩效类型">
          <j-dict-select-tag v-model="form.performType" placeholder="请选择绩效类型"
                             dictCode="perform_type"/>
        </a-form-model-item>
        <a-form-model-item label="排序" v-if="form.nodeLevel == 1">
          <a-input v-model="form.sort" placeholder="节点顺序" :readOnly="'query'===type"></a-input>
        </a-form-model-item>
      </a-form-model>
      <template v-if="form.nodeLevel == 2">
        <step-two v-if="step===1" ref="stepTwo" :layout="layout" :default-assign-type="assignType"
                  :node-id="selfNodeId" :workflow-id="workflowId" @saveSuccess="closeOrNext"></step-two>
        <step-three v-show="step===2" ref="stepThree" :layout="layout"
                    :node-id="selfNodeId" :workflow-id="workflowId" @saveSuccess="closeOrNext"></step-three>
      </template>
    </a-spin>
    <a-row :style="{textAlign:'right'}">
      <a-button :style="{marginRight: '8px'}" @click="close">关闭</a-button>
      <a-button v-if="'query'===type" :disabled="!hasNextStep" type="primary" @click="step++">下一步</a-button>
      <a-button v-else type="primary" @click="save">{{hasNextStep?'保存至下一步':'保存并关闭'}}</a-button>
    </a-row>
  </a-drawer>
</template>

<script>
  //节点编辑，新增，查看
  import {getAction, postAction} from "../../../api/manage";
  import RadioArray from "../components/RadioArray";
  import StepTwo from "../components/StepTwo";
  import StepThree from "../components/StepThree";

  export default {
    name: "NodeDetailModal",
    components: {StepThree, StepTwo, RadioArray},
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        required: true
      },
      nodeId: {
        type: String
      },
      workflowId: {
        type: String,
        required: true
      },
      defaultNodeLevel: {
        type: String
      },
      defaultOpType: {},
      defaultBackNodeId: {}
    },
    data() {
      return {
        layout: {
          labelCol: {
            xs: {span: 24},
            sm: {span: 5},
          },
          wrapperCol: {
            xs: {span: 24},
            sm: {span: 16},
          },
        },
        selfNodeId: '',
        title: '',
        step: 0,
        loading: false,
        assignType: '',
        form: {
          nodeLevel: null,
          nodeName: '',
          opType: '0',
          parentNodeId: null,
          backNodeId: null,
          sort: '',
          performType:undefined
        },
        rules: {
          nodeName: [{required: true, message: '请输入节点名称', trigger: 'blur'}],
          nodePid: [{required: true, message: '请选择上级节点', trigger: 'blur'}]
        },
        parentNodeData: [],
      }
    },
    computed: {
      hasNextStep() {
        return this.form.nodeLevel === '2' && this.step < 2;
      }
    },
    created() {
      this.form.nodeLevel = this.defaultNodeLevel;
      if (this.defaultNodeLevel == '2') {
        this.form.backNodeId = this.defaultBackNodeId;
        this.form.opType = this.defaultOpType;
      }
      if ('add' === this.type) {
        this.title = '新增';
        this.form.parentNodeId = this.nodeId;
      } else if ('edit' === this.type) {
        //查询节点信息，回显
        this.title = '编辑';
        this.selfNodeId = this.nodeId;
        this.queryNodeInfo()
      } else if ('query' === this.type) {
        this.title = '详情';
        this.selfNodeId = this.nodeId;
        this.queryNodeInfo()
      }
      this.loadParentNode()
    },
    methods: {
      //查询基本信息：编辑/查看详情
      queryNodeInfo() {
        getAction('sys/workflowNode/queryNodeInfo', {nodeId: this.nodeId, type: this.form.nodeLevel - 1}).then(res => {
          if (res.success) {
            this.form.nodeName = res.result.nodeName;
            this.form.opType = res.result.opType;
            this.form.sort = res.result.sort;
            this.form.backNodeId = res.result.backNodeId;
            this.form.parentNodeId = res.result.parentNodeId;
            this.form.performType = res.result.performType;
            this.assignType = res.result.assignType;
          } else {
            this.$message.error(res.message);
          }
        });
      },
      //加载父级节点数据
      loadParentNode() {
        getAction('sys/workflowNode/selectParentNodeByWorkflowId', {workflowId: this.workflowId}).then(res => {
          if (res.success) {
            this.parentNodeData = res.result;
          } else {
            this.$message.error(res.message);
          }
        }).catch(error => {
          console.log(error);
        })
      },
      //关闭抽屉
      close() {
        this.$emit('update:visible', false)
      },
      closeOrNext() {
        if (this.hasNextStep) {
          this.step++;
        } else {
          this.close()
        }
      },
      save() {
        switch (this.step) {
          case 0:
            this.saveBaseInfo();
            break;
          case 1:
            this.$refs.stepTwo.saveStepTwoInfo();
            break;
          case 2:
            this.$refs.stepThree.saveStepThreeInfo();
            break;
          default:
            break;
        }
      },
      //第一步：保存基本节点信息
      saveBaseInfo() {
        this.$refs.nodeForm.validate(validate => {
          if (validate) {
            let url = this.form.nodeLevel == 1 ? 'sys/workflowNode/addParentNode' : 'sys/workflowNode/addChildNode';
            this.addNode(url)
          } else {
            return false;
          }
        })
      },
      addNode(url) {
        this.loading = true;
        let params = {workflowId: this.workflowId};
        if ('add' != this.type) {
          params.nodeId = this.nodeId;
        }
        getAction(url, {...this.form, ...params}).then(res => {
          if (res.success) {
            if (res.result) {
              this.selfNodeId = res.result.nodeId;
            }
            this.$emit('refresh');
            this.closeOrNext();
          } else {
            this.$message.error(res.message);
          }
        }).catch(err => {
          console.log(err);
        }).finally(() => {
          this.loading = false;
        })
      },
    }
  }
</script>

<style scoped>

</style>